<script>
  const toys = [
    { id: 1, color: '红色', name: '赛车', types: ['户外', '运动'] },
    { id: 2, color: '绿色', name: '积木', types: ['益智', '室内'] },
    { id: 3, color: '绿色', name: '碗', types: ['室内', '器皿'] },
    { id: 4, color: '红色', name: '拼图', types: ['益智', '室内'] },
    { id: 5, color: '蓝色', name: 'UNO纸牌', types: ['桌游', '益智', '室内'] },
    { id: 6, color: '白色', name: '球', types: ['户外', '运动'] },
    { id: 7, color: '绿色', name: '气球', types: ['室内'] },
    { id: 8, color: '蓝色', name: '棋子', types: ['益智', '室内', '桌游'] },
    { id: 9, color: '红色', name: '水枪', types: ['户外'] },
    { id: 10, color: '红色', name: '橡皮泥', types: ['益智', '室内'] },
    { id: 11, color: '白色', name: '玻璃球', types: ['游戏'] },
    { id: 12, color: '紫色', name: '球拍', types: ['运动', '户外'] },
    { id: 13, color: '黑色', name: '弹弓', types: ['户外'] },
    { id: 14, color: '黄色', name: '布偶', types: ['家居', '室内'] },
    { id: 15, color: '蓝色', name: '跳绳', types: ['运动', '户外'] },
    { id: 16, color: '绿色', name: '垫子', types: ['家居', '运动', '室内'] },
  ]
  // 按如下模版打印所有物品
  /*
  <ul>
    <li>白色：<a href='item?id=1'>赛车，类型：<span>户外</span>, <span>运动</span></li>
    ...
  </ul>
  */
  const list = `<ul>${toys.map(function (items) {
    return `<li>${items.color}:<a href='item?id=${items.id}'>${items.name}</a>，类型${items.types.map(function (type) {
      return `<span>${type}</span>`
    }).join(', ')}</li>`
  }).join('\n')}</ul>`
  document.write(list);
  // 找出所有红色物品的名字数组
  const arr = toys.filter(function (n) {
    return n.color === '红色'
  }).map(function (item) {
    return item.name;
  })
  console.log(arr);
  // 找出所有绿色并且types包含室内的物品
  const arr1 = toys.filter(function (n) {
    return n.color === '绿色' && n.types.filter(function (v) {
      return v === '室内'
    })
  }).map(function (item) {
    return item.name;
  })
  console.log(arr1);
  // 一共有哪些种颜色？
  const colors = []
  for (let i = 0; i < toys.length; i++) {
    if (colors.indexOf(toys[i].color) === -1) {
      colors.push(toys[i].color)
    }
  }
  console.log(colors)

  const colors2 = toys.reduce(function (colors, toy) {
    if (colors.indexOf(toy.color) === -1) { colors.push(toy.color) }
    return colors
  }, [])
  // 一共有哪些种类型？
  const type = [];
  const types = toys.map(function (items) {
    return (items.types)
  })
  let str = types.join(',').split(',');
  for (let i = 0; i < str.length; i++) {
    if (type.indexOf(str[i]) === -1) {
      type.push(str[i])
    }
  }
  console.log(type);


  const type1 = toys.reduce(function (types, toy) {
    return [...types, ...toy.types.filter(function (type) {
      return types.indexOf(type) === -1
    })]
  }, [])
  console.log(type1);

  // 整理数据后按下面的格式显示
  /*
    <ul>
      <li>
        户外
        <ul>
          <li>红色的赛车</li>
          <li>白色的球</li>
          <li>...</li>
        </ul>
      </li>
      <ul>
      <li>
        运动
        <ul>
          <li>红色的赛车</li>
          <li>白色的球</li>
          <li>紫色的球拍</li>
        </ul>
      </li>
      ...
    </ul>
  */

  const data = toys.reduce(function (r, toy) {
    toy.types.forEach(function (type) {
      const item = r.find(function (item) {
        //汇总数据里是否包含该类型的item
        return item.type === type
      })
      if (item) {//包含
        item.toys.push({ name: toy.name, color: toy.color })
      } else {//不包含
        r.push({ type: type, toys: [{ name: toy.name, color: toy.color }] })
      }
    })
    return r;
  }, [])
  console.log(data);
  document.write(`
  <ul>
    ${data.map(function (item) {
    return `<li>${item.type}<ul>${item.toys.map(function (n) {
      return `<li>${n.color}的${n.name}</li>`
    }).join('')}</ul></li>`
  }).join('')}
  </ul>
  `)
</script>